<template>
	<base-popup
		:show="walletStore.walletSettingShow"
		@close="walletStore.setWalletSettingShow(false)">
		<template #left>
			<div class="flex items-center gap-1">
				<base-icon name="wallet2" size="24" class="text-t-3 cursor-default" />
				<base-text text-t="wallet.setting" class="text-lg" />
			</div>
		</template>
		<div class="py-[42px]" :class="[isPC() ? 'px-[35px]' : 'px-[25px]']">
			<div class="flex h-[41px] mb-5 gap-3 items-center">
				<n-switch size="large" class="mt-[3px]" v-model:value="formValue.hideZeroBalance" />
				<div>
					<base-text text-t="wallet.setting.hideZero" class="block my-[2px]" />
					<base-text text-t="wallet.setting.hideZeroDesc" class="block text-t-3" />
				</div>
			</div>
			<div class="flex h-[41px] mb-8 gap-3 items-center">
				<n-switch size="large" class="mt-[3px]" v-model:value="formValue.displayCryptoInFiat" />
				<div>
					<base-text text-t="wallet.setting.fiatCurrency" class="block my-[2px]" />
					<base-text text-t="wallet.setting.fiatCurrencyDesc" class="block text-t-3" />
				</div>
			</div>
			<div class="-mr-[13px] mb-[26px]">
				<n-scrollbar class="max-h-[364px]" content-class="pr-[13px]">
					<n-grid
						:x-gap="8"
						:y-gap="12"
						:cols="3"
						:class="{
							'opacity-50': !formValue.displayCryptoInFiat,
							'pointer-events-none': !formValue.displayCryptoInFiat
						}">
						<n-grid-item v-for="item in currencyStore.fiatList" :key="item.currency">
							<div
								class="h-[40px] flex items-center justify-center gap-2 rounded-lg app-bg-react"
								:class="[
									isPC() ? 'w-[138px]' : 'w-[103px]',
									{ 'bg-primary': formValue.selectedFiatCurrency === item.currency }
								]"
								@click="formValue.selectedFiatCurrency = item.currency">
								<base-currency class="size-5" :currency="item.currency" />
								<span class="min-w-[3em] overflow-hidden">
									<n-ellipsis v-bind="NBind.Ellipsis">
										{{ item.appName || item.currency }}
									</n-ellipsis>
								</span>
							</div>
						</n-grid-item>
					</n-grid>
				</n-scrollbar>
			</div>
			<base-button type="primary" text-t="action.save" :loading="loading" @click="handleSave" />
		</div>
	</base-popup>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import { NEllipsis, NGrid, NGridItem, NScrollbar, NSwitch } from 'naive-ui'
import { BaseButton, BaseCurrency, BaseIcon, BasePopup, BaseText } from '@/components/base'
import { useCurrencyStore, useWalletStore } from '@/store'
import { WalletConfig, WalletConfigEnum } from '@/types'
import { isPC, showError } from '@/utils'
import { NBind } from '@/plugins/naive-ui'

const walletStore = useWalletStore()
const currencyStore = useCurrencyStore()
const loading = ref(false)
const formValue = reactive({
	hideZeroBalance: walletStore.walletConfig.hideZeroBalance,
	displayCryptoInFiat: walletStore.walletConfig.displayCryptoInFiat,
	selectedFiatCurrency: walletStore.walletConfig.selectedFiatCurrency
})

// TODO 组件始终是挂载状态 可能存在不必要的性能消耗
const diff = computed(() => {
	const { hideZeroBalance, displayCryptoInFiat, selectedFiatCurrency } = walletStore.walletConfig
	return {
		hideZeroBalance: hideZeroBalance !== formValue.hideZeroBalance,
		displayCryptoInFiat: displayCryptoInFiat !== formValue.displayCryptoInFiat,
		selectedFiatCurrency: selectedFiatCurrency !== formValue.selectedFiatCurrency
	}
})

const handleChange = async <T extends keyof WalletConfig>(key: T, value: WalletConfig[T]) => {
	await walletStore.updateUserWalletConfig({ confCode: key, confValue: value })
}

const handleSave = async () => {
	try {
		loading.value = true
		await Promise.all([
			diff.value.hideZeroBalance &&
				handleChange(WalletConfigEnum.hideZeroBalance, formValue.hideZeroBalance),
			diff.value.displayCryptoInFiat &&
				handleChange(WalletConfigEnum.displayCryptoInFiat, formValue.displayCryptoInFiat),
			diff.value.selectedFiatCurrency &&
				handleChange(WalletConfigEnum.selectedFiatCurrency, formValue.selectedFiatCurrency)
		])
		walletStore.setWalletSettingShow(false)
	} catch (error) {
		showError(error)
	} finally {
		loading.value = false
	}
}

watch(
	() => walletStore.walletSettingShow,
	(value) => {
		if (value) {
			formValue.hideZeroBalance = walletStore.walletConfig.hideZeroBalance
			formValue.displayCryptoInFiat = walletStore.walletConfig.displayCryptoInFiat
			formValue.selectedFiatCurrency = walletStore.walletConfig.selectedFiatCurrency
		}
	}
)
</script>

<style scoped></style>
